<template>
<div class="box">
    <div class="modal"></div>
    <div class="kerboardBox" id="dropEle">
      <!-- <input >{{keyBoard.Val}}</span> -->
      <div class="headInput">
        <div class="previewPicBox">
          <img :src="keyBoard.previewPic" alt="">
        </div>
        <label for="">车牌预览：</label>
        <input type="text" disabled="true" v-model="keyBoard.Val" class="PreviewInput">
      </div>
      <div class="innercontent">
        <div class="text">
          <ul>
            <li v-for="row in keyboardData.text">
              <span v-for="font in row" @click="addOne(font)">{{font}}</span>
            </li>
          </ul>
        </div>
        <div class="number">
        <ul>
            <li v-for="row in keyboardData.number">
              <span v-for="num in row" @click="addOne(num)" :class="num | filterColor">{{num}}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="btnGroup">
          <button type="button" class="" @click="close_KB()">关闭</button>
          <button type="button" class="" @click="close_KB()">确定</button>
          <!-- <button type="button" class="" @click="changeNum_KB()" v-if="keyBoard.isNumber">切换中文</button> -->
          <!-- <button type="button" class="" @click="changeNum_KB()" v-else>切换英文</button> -->
      </div>
    </div>
</div>

</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      keyboardData: {
        text: [
          ["京", "津", "冀", "晋", "蒙", "辽", "吉", "黑", "沪", "苏", "浙", "皖", "赣"],
          ["闽", "鲁", "豫", "鄂", "湘", "粤", "桂", "琼", "渝", "川", "黔", "滇", "藏"],
          ["陕", "甘", "青", "宁", "新", "港", "澳", "台", "WJ", "警", "学", "试", "挂"],
        ],
        number: [
          ["民航", "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "7", "8", "9"],
          ["P", "A", "S", "D", "F", "G", "H", "J", "Del", "4", "5", "6"],
          ["K", "L", "Z", "X", "C", "V", "B", "N", "M", "0", "1", "2", "3"],
        ]
      }
    };
  },
  mounted() {
    // this.drag();
  },
  watch: {
    "keyBoard.isShow": function(val) {
      if (val) {
        this.$store.commit("changeNum_KB", false);
      }
    }
  },
  computed: {
    ...mapState(["keyBoard"])
  },
  methods: {
    close_KB() {
      this.$store.commit("changeShow_KB", { bool: false });
    },
    addOne(val) {
      // 键盘删除 确认 事件响应
      switch (val) {
        case "Del":
          let length = this.keyBoard.Val.length;
          if (length > 0) {
            this.keyBoard.Val = this.keyBoard.Val.substring(0, length - 1);
          }
          break;
        case "确认":
          this.$store.commit("changeShow_KB", { bool: false });
          // this.changeShow_KB(false);
          break;
        default:
          if (this.keyBoard.Val.length >= 8) {
            this.keyBoard.Val = this.keyBoard.Val.substr(0, 7);
          }
          this.keyBoard.Val += val;
          break;
      }
      //   自动切换键盘
      if (this.keyBoard.Val.length == 1 && val !== "Del") {
        this.$store.commit("changeNum_KB");
      } else if (this.keyBoard.Val.length == 0 && val == "Del") {
        this.$store.commit("changeNum_KB");
      }
    },
    drag() {
      var oDiv = document.getElementById("dropEle");
      console.log("oDiv", oDiv);
      var distX = 0;
      var distY = 0;
      oDiv.onmousedown = function(ev) {
        var oEvent = ev || event;
        distX = oEvent.clientX - oDiv.offsetLeft; //获取边界到鼠标的距离
        distY = oEvent.clientY - oDiv.offsetTop;
        document.onmousemove = function(ev) {
          var oEvent = ev || event;
          var x = oEvent.clientX - distX;
          var y = oEvent.clientY - distY;
          if (x < 0) {
            x = 0;
          }
          if (y < 0) {
            y = 0;
          }
          if (x > document.documentElement.clientWidth - oDiv.offsetWidth) {
            x = document.documentElement.clientWidth - oDiv.offsetWidth;
          }
          oDiv.style.left = x + "px"; //根据鼠标位置相对定位，得到left，top值
          oDiv.style.top = y + "px";
        };
        document.onmouseup = function() {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
    },
    ...mapMutations(["changeNum_KB", "changeShow_KB", "serVal_KB"])
  },
  filters: {
    filterColor(type) {
      var n = Number(type);
      if (!isNaN(n)) {
        return { Num: true };
      }
      switch (type) {
        case "Del":
          return { Del: true };
          break;
        case "确认":
          return { Sure: true };
          break;
        default:
          break;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.colorChange(@color) {
  background-color: @color;
  &:hover {
    background-color: darken(@color, 15%);
  }
}
.modal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  z-index: 99998;
}
.kerboardBox {
  font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif, "宋体";
  position: fixed;
  z-index: 99999;
  width: 690px;
  // height: 410px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  box-shadow: 1px 1px 6px 0px #666;
  background: #fff;
  border-radius: 5px;
  padding: 20px;
  // cursor: move;
  .headInput {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
    .previewPicBox {
      width: 130px;
      height: 35px;
      margin-right: 15px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .PreviewInput {
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 3px;
      background-color: white;
    }
  }

  .innercontent {
    padding: 10px;
    background-color: #ebebeb;
    border: 1px #ddd solid;
    border-radius: 5px;
    // .text {
    //   margin-bottom: 10px;
    // }
  }
  .btnGroup {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    button:first-child {
      .colorChange(#fff);
      color: #5588dd;
      border: 1.5px solid #5588dd;
      box-sizing: border-box;
    }
    button:not(:last-child) {
      margin-right: 30px;
    }
    button {
      .colorChange(#5588dd);
      font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif, "宋体";
      display: inline-block;
      padding: 6px 28px;
      font-size: 16px;
      text-align: center;
      text-decoration: none;
      color: #fff;
      border-radius: 4px;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      white-space: nowrap;
      cursor: pointer;
      letter-spacing: 2px;
      outline: none;
      border: none;
      font-weight: bold;
      touch-action: manipulation;
    }
  }
  li {
    height: auto;
  }
  span {
    .colorChange(#4f94cd);
    display: inline-block;
    height: 38px;
    width: 38px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    margin: 5px;
    color: #fff;
    border-radius: 5px;
    text-align: center;
    line-height: 38px;
    box-shadow: 1px 1px 6px 0px #999;
    user-select: none;
  }
  .Num {
    .colorChange(#6495ed);
  }
  .Del {
    .colorChange(#cd3333);
    width: 85px;
  }
  .Sure {
    .colorChange(#333);
    // width: 85px;
    // letter-spacing: 4px;
  }
}
</style>
